
<template>
    <div class="invoice-cont">
        <el-tabs 
            v-model="activeTab"
            @tab-click="handleTab"
        >   
            <div class="tab-search flex ali-c">
                <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    size="small"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['12:00:00']">
                </el-date-picker>
                <button class="com-full-btn ml30">搜索</button>
                <button class="com-plain-btn ml25">重置</button>
            </div>
            <el-tab-pane label="开具发票" name="first">
                <div class="tab-cont">
                    <div 
                        class="list-item"
                        v-for="i in 2"
                        :key="i"
                    >
                        <div class="list-title">
                            <div class="flex ali-c">
                                <el-checkbox v-model="checked"></el-checkbox>
                                <div class="ml10">2021-06-29  15:33:00</div>
                                <div class="ml40">流水号：TEST100000000078</div>
                            </div>
                            <div class="list-fr">
                                <div>实际支付</div>
                                <div>支付平台</div>
                            </div>
                        </div>
                        <div class="list-cont">
                            <div class="flex ali-c">
                                <div class="list-img">
                                    <img src="../../static/images/invoice_icon1.png">
                                </div>
                                <div class="ml100">
                                    <h3 class="fs18">裁判文书</h3>
                                    <div class="mt25 fs18">
                                        <span>支付</span>
                                        <span style="color:#F56060" class="pl15">198.00元</span>
                                    </div>
                                </div>
                            </div>
                            <div class="list-fr fs20 mr15">
                                <div>198.00元</div>
                                <div>PC端</div>
                            </div>
                        </div>
                    </div> 
                    <div class="mt30 flex ali-c fs16 ml15" style="color:#4A4A4A">
                        <el-checkbox v-model="allChecked"></el-checkbox>
                        <h3 class="ml10 fs16">全选</h3>
                        <div class="ml25">
                            <span style="color:#F56060">7</span>
                            <span class="ml5">条</span>
                        </div>
                        <div class="ml25">
                            <span>支付共</span>
                            <span style="color:#F56060" class="ml5">499.04</span>
                            <span>元</span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="发票记录" name="second">
                <div class="tab-cont">
                    <div 
                        class="list-item"
                        v-for="i in 2"
                        :key="i"
                    >
                        <div class="list-title">
                            <div>2021-06-29  15:33:00</div>
                            <div class="list-fr" style="width:38%">
                                <div>支付金额</div>
                                <div>开票状态</div>
                                <div class="mr15">发票信息</div>
                            </div>
                        </div>
                        <div class="list-cont">
                            <div class="flex ali-c">
                                <div class="list-img">
                                    <img src="../../static/images/invoice_icon2.png">
                                </div>
                                <div class="ml100">
                                    <h3 class="fs18">线上知识服务内容</h3>
                                </div>
                            </div>
                            <div class="list-fr fs16" style="width:40%">
                                <div class="ml10">198.00元</div>
                                <div class="ml10">已开票</div>
                                <div class="flex ali-c flexv flexc">
                                    <button class="com-full-btn" style="padding:0;width:90px">查看</button>
                                    <button class="com-plain-btn mt10" style="padding:0;width:90px">下载发票</button>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
            </el-tab-pane>
        </el-tabs>
        <!--   v-if="currentPage.total > currentPage.size &&tableData.length != 0" -->
        <el-pagination
            class="stomStyle mt25 tr"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :pager-count="5"
            :page-sizes="[10, 20, 30]"
            :current-page="currentPage.page"
            :page-size="currentPage.size"
            :total="currentPage.total"
            layout="sizes, prev, pager, next"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "invoice",
    components:{
       
    },
    computed: {
       
    },
    data() {
        return {
            activeTab: 'first',
            value1: '',
            checked:false,
            allChecked:false,
            currentPage: {
                total: 100,
                page: 1,
                size: 10,
            },
        };

    },
    methods: {
        handleTab(tab, event) {
            console.log(tab, event);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
   
    created() {
       
    },
    
    

};
</script>

<style lang="stylus" scoped>
.invoice-cont
    width 100%
    min-height 760px
    background #F2F4F6
    /deep/.el-tabs__header
        background #fff
        margin 0
    /deep/.el-tabs__active-bar
        background #3266CC
        height 3px
    /deep/.el-tabs__item
        padding 0 42px !important
        font-size 16px
        height 45px
        line-height 50px
        color #333
    /deep/.el-tabs__item.is-active
        color: #3266CC;
        font-weight bolder
    /deep/.stomStyle .el-input__inner
        background #F2F4F6
    .tab-search
        width 100%
        background #fff
        padding 30px 40px
    .tab-cont
        width 100%
        min-height 270px
        .list-title
            display flex
            justify-content space-between
            align-items center
            width 100%
            height 54px
            padding 0 40px 0 15px
            font-size 16px
            /deep/.el-checkbox__inner
                width 16px
                height 16px
        .list-fr
            display flex
            justify-content space-between
            align-items center
            width 30%
        .list-cont
            display flex
            justify-content space-between
            align-items center
            width 100%
            height 130px
            background #fff
            border-radius 4px
            padding 0 40px
            .list-img
                width 80px
                height 80px
                line-height 78px
                text-align center
                background #FFFFFF
                border 1px solid #E8E8E8
                border-radius 50%
                overflow hidden
                img
                    width 39px
                    height 39px
    
</style>